import React, { Suspense } from 'react'
import routes from './routerConfig'
import { BrowserRouter,Routes,Route,Navigate} from "react-router-dom";


function RouterView() {
  const renderRouter = (arr) => {
    return arr.map((item,index)=>{
      return item.path? <Route key={index} path={item.path}
         element={<item.element></item.element>}>
        {
          item.children && renderRouter(item.children)
        }
      </Route>:
      <Route key={index} path={item.from} element={<Navigate to={item.to}></Navigate>}></Route>
    })
  }
 
  return (
    <Suspense fallback={<div>路由加载中</div>}>
      <BrowserRouter>
        <Routes>
          {
            renderRouter(routes)
          }
        </Routes>
      </BrowserRouter>
    </Suspense>
  )
}

export default RouterView